<template>
    <wd-action-sheet v-model="show" title="选择地区" :z-index="100">
        <view class="box">
            <view class="selectBox">
                <view :class="active == index ? 'active' : ''" @click="get(index)" v-for="item, index in btn"
                    :key="index">
                    <view class="text">{{ item.text }}</view>
                    <wd-icon name="arrow-down" size="32rpx" :color="active == index ? '#F1404B' : '#888'"></wd-icon>
                </view>
            </view>
            <view class="listbox">
                <view class="list" v-if="list.length">
                    <view v-for="item, index in list" :key="index" @click="set(item)">{{ item.title }}</view>
                </view>
            </view>
            <view class="btn">
                <view @click="reset">重置</view>
                <view @click="submit">确定</view>
            </view>
        </view>
    </wd-action-sheet>
</template>
<script lang="ts" setup>
import { http } from '@/utils/http'
const show = defineModel<boolean>('show', { default: false })
const emit = defineEmits(['submit'])
const props = defineProps({
    province_id: { type: [String, Number], default: 0 },
    city_id: { type: [String, Number], default: 0 },
    district_id: { type: [String, Number], default: 0 },
    province: { type: String, default: '' },
    city: { type: String, default: '' },
    district: { type: String, default: '' },
    is_city: { type: Boolean, default: false },
    required: { type: Boolean, default: false }, // 显示定位
})
const active = ref(null)
const list = ref([])
const btn = ref([
    { text: props.province || '请选择', id: props.province_id },
    { text: props.city || '请选择', id: props.city_id },
    { text: props.district || '请选择', id: props.district_id },
])

watch(() => props.province_id, (newData) => { btn.value[0].id = newData })
watch(() => props.city_id, (newData) => { btn.value[1].id = newData })
watch(() => props.district_id, (newData) => { btn.value[2].id = newData })
watch(() => props.province, (newData) => { btn.value[0].text = newData || '请选择' })
watch(() => props.city, (newData) => { btn.value[1].text = newData || '请选择' })
watch(() => props.district, (newData) => { btn.value[2].text = newData || '请选择' })

function get(index) {
    let id: any = 0
    if (index) {
        id = btn.value[index - 1].id
        if (!id) return
    }
    active.value = index
    let param: any = {
        pid: id
    }
    if (index == 2 && props.is_city) param.city = '是'
    http.get('/member/system/region', param).then((res: any) => {
        if (res.code == 200) {
            if (!res.data.data.length) uni.showToast({ title: '没有更多内容了', icon: 'none' })
            list.value = res.data.data
        }
    })
}

function set(item) {
    btn.value[active.value].text = item.title
    btn.value[active.value].id = item.id
    list.value = []

    for (let i in btn.value) {
        if (i > active.value) {
            btn.value[i].text = '请选择'
            btn.value[i].id = 0
        }
    }
}

function submit() {
    if (props.required) {
        if (!btn.value[0].id) return uni.showToast({ title: '请选择省份', icon: 'none' })
        if (!btn.value[1].id) return uni.showToast({ title: '请选择城市', icon: 'none' })
        if (!btn.value[2].id) return uni.showToast({ title: '请选择地区', icon: 'none' })
    }

    let b = JSON.parse(JSON.stringify(btn.value))
    if (b[0].text == '请选择') b[0].text = ''
    if (b[1].text == '请选择') b[1].text = ''
    if (b[2].text == '请选择') b[2].text = ''
    emit('submit', b)
    // emit('submit', b, [b[0].text, b[1].text, b[2].text].join(' '))
    show.value = false
}

function reset() {
    for (let i in btn.value) {
        btn.value[i].text = '请选择'
        btn.value[i].id = 0
    }
    active.value = null
    list.value = []
}
</script>

<style scoped>
.box {
    padding: 20rpx;
}

.selectBox {
    display: flex;
    justify-content: space-between;
}

.selectBox>view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 32%;
    padding: 16rpx 12rpx;
    border: solid 1px #e2e2e2;
    border-radius: 10rpx;
}

.selectBox>view.active {
    color: #F1404B;
    border-color: #F1404B;
}

.selectBox>view>.text {
    max-width: 80%;
    overflow: hidden;
    font-size: 28rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listbox {
    height: 400rpx;
}

.list {
    height: 400rpx;
    padding: 20rpx 0;
    overflow-y: auto;
    text-align: center;
    border: solid 1px #e2e2e2;
}

.list>view {
    font-size: 28rpx;
    line-height: 60rpx;
}

.btn {
    display: flex;
    margin-top: 50rpx;
}

.btn>view {
    width: 50%;
    line-height: 80rpx;
    text-align: center;
}

.btn>view:first-child {
    color: #FF424E;
    background: #FFF3F3;
    border-top-left-radius: 100rpx;
    border-bottom-left-radius: 100rpx;
}

.btn>view:last-child {
    color: white;
    background: #FF4954;
    border-top-right-radius: 100rpx;
    border-bottom-right-radius: 100rpx;
}
</style>